<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="./images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>-*锋行天下音乐*-</title>
  <style>
    body {
      margin: 0;
    }

    .top {
      position: relative;
      width: 100vw;
      height: 28vh;
      overflow: hidden;
    }
    @keyframes moveList {
      0%{
        left: 90%;
      }
      100%{
        left: -30%;
      }
    }
    .top .music-title{
      position: absolute;
      width: auto;
      height: 30px;
      bottom: 5px;
      left: -100%;
      color: #1313e9;
      white-space: nowrap;
      font-size: 18px;
      line-height: 30px;
      animation: moveList 16s linear infinite;
    }
    .top img {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
    }

    .tab {
      width: 100%;
      height: 6vh;
      background: rgb(240, 238, 238);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    .tab .t {
      width: 48%;
      height: 88%;
      border-radius: 5px;
      background: rgb(208, 204, 205);
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 5vw;
    }

    .tab .active {
      background: #414aeb;
      color: #ffffff;
    }

    .list-wrap {
      width: 100%;
      position: relative;
    }

    .list {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      padding-bottom: 6vh;
      top: 0;
      left: 0;
      padding: 5px 5px 70px;
      display: none;
    }

    .list-wrap .active {
      display: block;
    }

    .item {
      width: 100%;
      height: 6vh;
      background: rgba(245, 241, 242, 0.5);
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .item.actived{
      background: #bebef7;
    }
    .item .i {
      padding: 5px;
      font-size: 20px;
      color: #66666a;
    }

    .item .p {
      padding: 5px;
      font-size: 20px;
      color: #66666a;
    }

    .item .n {
      width: 80%;
      height: 5vh;
      line-height: 5vh;
      text-align: center;
      font-size: 20px;
      color: #66666a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

    }

    .audio {
      position: fixed;
      bottom: 0;
      left: 0;
    }

    .audio audio {
      width: 100vw;
    }
  </style>
  <script src="./js/axios.js"></script>
</head>

<body>
  <div class="top">
    <img id="header" src="" />
    <div class="music-title" id="music-title"></div>
  </div>
  <div class="tab">
    <div class="t active">歌曲</div>
    <div class="t">视频</div>
  </div>
  <div class="list-wrap">
    <div class="list active" id="songList">
      <!-- <div class="item">
        <div class="i">1</div>
        <div class="n">深刻的健康v你说的你</div>
        <div class="p">></div>
      </div> -->
    </div>
    <div class="list" id="videoList">
      <!-- <div class="item">
        <div class="i">1</div>
        <div class="n">v深刻的健康v你说的你</div>
        <div class="p">></div>
      </div> -->
    </div>
  </div>
  <div class="audio">
    <audio id="audio" src="" controls>
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
</body>
<script>
  function encodeToBase64(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
  }
  window.onload = () => {
    let tabs = document.querySelectorAll(".tab .t")
    let list = document.querySelectorAll(".list-wrap .list")
    let musicTitle=document.getElementById("music-title")
    let audio = document.getElementById('audio')
    let activeIndex=-1
    let singerName = window.location.search.split('?')[1]
    let songMain = document.getElementById('songList')
    let videoMain = document.getElementById('videoList')
    let songList = []
    let videoList = []
    audio.loop=false
    audio.addEventListener("ended",()=>{
      if(activeIndex-0==songList.length-1){
        activeIndex=0
      }else{
        activeIndex=activeIndex-0+1
      }
      audio.src = songList[activeIndex].url
      musicTitle.innerText=songList[activeIndex].title
      audio.play()
      Array.from(songMain.getElementsByClassName("item")).forEach((item,index)=>{
        item.classList.remove("actived")
        if(index==activeIndex){
          item.classList.add("actived")
        }
      })
    })
    for (let i = 0; i < 2; i++) {
      tabs[i].onclick = function () {
        let activeClass = Array.from(this.classList).findIndex(e => e == 'active')
        if (activeClass == -1) {
          tabs.forEach(i => i.classList.remove('active'))
          list.forEach(i => i.classList.remove('active'))
          this.classList.add('active')
          list[i].classList.add('active')
        }
      }
    }
    let parStr=location.search.split("?")[1]
    let id=parStr.split("&")[0].split("=")[1]
    axios.get("/shopApi/getSingersDataByName?id=" + id).then(res => {
      if (res.status == 200) {
        header.src = res.data.header
        let songStr = ''
        let videoStr = ''
        songList = res.data.songList
        videoList = res.data.videoList
        songList.forEach((item, index) => {
          songStr += `
        <div class="item" data-index="${index}">
          <div class="i">${index + 1}</div>
          <div class="n" data-index="${index}">${item.title}</div>
          <div class="p" data-index="${index}">></div>
        </div>
        `
        })
        songStr+=`<div class="item">
          <div class="i"></div>
          <div class="n"><a href="/">回首页</a></div>
          <div class="p"></div>
        </div>`
        songMain.innerHTML = songStr
        videoList.forEach((item, index) => {
          videoStr += `
        <div class="item" data-index="${index}">
          <div class="i">${index + 1}</div>
          <div class="n" data-index="${index}">${item.title}</div>
          <div class="p" data-index="${index}">></div>
        </div>
        `
        })
        videoStr+=`<div class="item">
          <div class="i"></div>
          <div class="n"><a href="/">回首页</a></div>
          <div class="p"></div>
        </div>`
        videoMain.innerHTML = videoStr
      }
    })

    songMain.addEventListener('click', (e) => {
      let index = e.target.dataset.index
      activeIndex=index
      audio.src = songList[index].url
      audio.autoplay=true
      musicTitle.innerText=songList[index].title
      audio.play()
      Array.from(songMain.getElementsByClassName("item")).forEach((item,index)=>{
        item.classList.remove("actived")
        if(index==activeIndex){
          item.classList.add("actived")
        }
      })
    })
    videoMain.addEventListener('click', (e) => {
      let index = e.target.dataset.index
      // window.sessionStorage.setItem("videoSrc", JSON.stringify(videoList[index].url))
      let src=encodeToBase64(videoList[index].url)
      window.location.href = `/videoPlay.html?src=${src}`
    })
    //提交游客记录
    let str=navigator.userAgent.toLocaleLowerCase()
      let strArr=str.split(" ")
      let last1=strArr[strArr.length-1]
      let last2=strArr[strArr.length-2]
      let ua=`${last2}-${last1}`
      axios.get(`/shopApi/addTourist?scene=music|singerHome&message=${ua}`).then(res => {
        if(res.status==200){
          console.log("ok")
        }
      })
  }
</script>

</html>